<template>
	<view class="user-container">
		<view class="content-box">

			<view class="header border-radius padding-22">
				<view class="header-panel padding-bottom-22 ">
					<image :src="actUserAvatar" mode="aspectFill" @click="navToUserInfo"
						class="image-width-120 bg-white border-radius padding-2">
					</image>
					<view class=" margin-left-30 colorWhite flex-1" @click="navToUserInfo">
						<view class="padding-top-8">
							<!-- <text v-if="isLogin">{{userInfo.nickname||userInfo.username}}</text>
						<text v-else>游客</text> -->
							<text>{{ isLogin? userInfo.nickname||userInfo.username:"登录" }}</text>
						</view>

						<view class="font-24 ">
							<text>{{isLogin? userInfo.email||'' :''}}</text>
						</view>
						<view class="font-24 ">
							<text>{{isLogin? (userInfo.mobile ? '+'+ userInfo.country_code +userInfo.mobile :'') :''}}</text>
						</view>
						<!-- <view class="font-20 member " v-if="userInfo.member">
						<text class="name">{{ userInfo.member.name }}</text>
					</view> -->
					</view>
					<tian-icons type="singin" v-if="hasSign" icolor="#ffffff" size="28" @click="navToSign">
						<text class="font-20 colorWhite">{{taskBtnText}}</text>
					</tian-icons>
				</view>
			</view>
			<view class="content-body margin-22 padding-22 border-radius background-color-efefef">

				<view class="ti-flex margin-top-60 padding-bottom-22 options">
					<template v-for="(op, index) in optionItemsList" :key="index">
						<view class="opt-item" @click="doNavTo(op)">
							<wjf-iconfont :code="op.code" :color="op.color" size="26" class="opt-icon">
							</wjf-iconfont>
							<view class="item-text-box">
								<text>{{ op.text }}</text>
							</view>

						</view>
					</template>

				</view>
			</view>
			<!-- 专用于处理商铺 -->
			<view class="content-body margin-22  bg-white border-radius">

				<uv-list>
					<uv-list-item :title="$w('申请展示空间')" note=""
						thumb="https://wjf-6086.oss-cn-beijing.aliyuncs.com/allian-sys/static/JoinAlliance.png"
						thumb-size="sm" clickable show-arrow right-text="" @click="toApplyShop"></uv-list-item>
					<uv-list-item v-if="hasUnbound" title="有关联商铺" note="发现系统中有与您关联的商铺" clickable show-arrow
						show-extra-icon :extra-icon="{icon:'error-circle-fill',color:'red',size:24}" :show-badge="true"
						:badge="{value:unboundNumber}" right-text="绑定商铺" @click="navtoBoundShops"></uv-list-item>
					<uv-list-item v-if="hasShop" title="商铺管理"
						thumb="https://wjf-5866.oss-cn-hongkong.aliyuncs.com/henghui/static/shop-manage.png"
						thumb-size="sm" clickable show-arrow right-text="管理和设置商位"
						@click="navtoShopsManage"></uv-list-item>
				</uv-list>
				<!-- <view class="title ti-flex between" @click="navToShopApply">
				<wjf-iconfont code="e63e" color="#f40000" size="14">
					<text style="margin-left: 4rpx;color: #555;">我的门店</text>
				</wjf-iconfont>
				<view class="">
					<text style="color: #888;">入驻申请</text>
					<uni-icons type="right" color="#777"></uni-icons>
				</view>
			</view> -->
				<!-- 这部分放在商铺管理页 -->
				<!-- <view class="">
				<view v-for="(item,index) in adminShops" :key="index"
					class="margin-top-20 ti-flex under-line padding-bottom-20" @click="navTo(item.page,item)">
					<image :src="$thumbImg(item.src,'80x80')" mode="aspectFill" class="image-width-80 border-radius">
					</image>
					<view class="flex-1 margin-left-12">
						<text class="font-32">{{item.name}}</text>
						<text v-if="item.id">({{item.id}})</text>
						<text v-if="item.stateText" class="margin-left-10 colorRed">{{item.stateText}}</text>
						<view class=" font-24 margin-top-8 colorRed" v-if="item.apply_result">
							<text>{{item.apply_result}}</text>
						</view>
						<view class=" font-24 colorGray margin-top-8" v-else-if="item.address">
							<text>{{item.address.address}}</text>
						</view>
					</view>
					<tian-icons type="xiangyou1" align="left" color="#c5c5c5">
					</tian-icons>
				</view>
			</view> -->
			</view>
		</view>
		<!-- <view class="">
			<cloud-image-alioss v-model="imgList" imageNumber="12" uploadDir="henghui/test" imageMaxSize="500"></cloud-image-alioss>
		</view> -->
		<!-- <view class="">
			<button type="default" @click="toLogin">toLogin</button>
		</view> -->
		<!-- <view class="">
			<button type="default" @click="testAliSms">test-ali-sms</button>
		</view> -->
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<!-- <view class="">
			<button type="default" @click="testgetUser">testgetUser</button>
		</view> -->
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>
		<view class="">
			<ap126-footer></ap126-footer>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/js_sdk/mall/request.js';
	import {
		mapActions
	} from 'vuex'
	import {
		store as uniIdStore
	} from '@/uni_modules/uni-id-pages/common/store';
	import checkUpdate from "@/uni_modules/uni-upgrade-center-app/utils/check-update";

	const db = uniCloud.database()
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	import message from './i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		mixins: [commMixinWjf],
		data() {
			return {
				hasSign: false,
				isLocalLogin: false,
				adminShops: [],
				showTeamPopup: false, //兼容微信小程序，如果使用默认配置，界面上会弹出键盘
				taskBtnText: "",
				signTask: {},
				orderList: [],
				optionDataList: [],
				options: {
					// ...enumConverter
				},
				isInWeixinBrowser: false, //是否微信浏览器
				actionSheetLoading: false,
				apkLink: '', //apk下载链接
				// checkFriendIds: [],
				checkFriendData: [], //包含_id和lang
				group_id: false,
				// imgList:[]
				/**
				 * 当前用户的商户状态
				 * null -初始值  unbound -有但未绑定 Bound -已绑定
				 * 默认多商户，一人名下有多家商铺，也可以分开操作
				 */
				hasUnbound: false, //有未绑定的
				hasBounded: null, //有已绑定的
				unboundNumber: 0,
				routes: [{
						to: "/pages/expo-forum/expo-forum",
						name: "展会活动",
					},
					{
						to: "",
						name: "活动详情",
					}
				],
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			isLogin() {
				return uniCloud.getCurrentUserInfo().tokenExpired > Date.now()
			},
			userAvatar() {
				// userInfo.avatar_file&&userInfo.avatar_file.url? userInfo.avatar_file.url:'@/static/avatar.png'
				return this.userInfo.avatar ? this.userInfo.avatar : '/static/avatar.png'
			},
			actUserAvatar() {
				return this.$thumbImg(this.userAvatar, '50x50')
			},
			userInfo() {
				return this.$store.state.user.userInfo
			},
			userMobile() {
				return this.userInfo.mobile ? this.userInfo.mobile : ''
			},
			// 是否已有正常商铺
			hasShop() {
				return this.userInfo.shop_ID && this.userInfo.shop_ID.length > 0
			},
			optionItemsList() {
				let colom = 5,
					defColor = '#ec6535',
					color = '#ec6535';
				let optionDataList = [
					// {
					// 	type: 'gouwudai',
					// 	text: this.$w('分销业绩'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/achievement'
					// }, 
					// {
					// 	type: 'renwu',
					// 	text: this.$w('每日任务'),
					// 	checkLogin: true,
					// 	//#ifdef MP-WEIXIN
					// 	checkMobile: true, //检查手机号是否存在
					// 	//#endif
					// 	open_url: '/pages/user/tasks'
					// },
					// {
					// 	code: 'e654',
					// 	type: 'fenxiang',
					// 	text: this.$w('推荐应用'),
					// 	checkLogin: true,
					// 	//#ifdef MP-WEIXIN
					// 	checkMobile: true, //检查手机号是否存在
					// 	//#endif
					// 	// open_url: '/pages/user/invite'
					// },
					// {
					// 	type: 'shangji1',
					// 	text: this.$w('申请渠道'),
					// 	checkLogin: true,
					// 	//#ifdef MP-WEIXIN
					// 	checkMobile: true, //检查手机号是否存在
					// 	//#endif
					// 	open_url: '/pages/user/channel?type=1'
					// },
					// {
					// 	type: 'shoucang',
					// 	text: this.$w('我的收藏'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/favorite'
					// },
					// {
					// 	type: 'liuyan',
					// 	text: this.$w('我的消息'),
					// 	checkLogin: true,
					// 	open_url: '/pages/index/chat'
					// },
					// {
					// 	type: 'zuji',
					// 	text: this.$w('我的足迹'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/visite'
					// },
					// {
					// 	type: 'zuobiao',
					// 	text: this.$w('收货地址'),
					// 	checkLogin: true,
					// 	open_url: '/pages/address-2/list'
					// },
					// {
					// 	type: 'tongji',
					// 	text: this.scoreName + ' ' + this.$w('排行'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/score/ranking'
					// },
					/* {
						type: 'xinyongqia',
						text: '消费排行',
						checkLogin: true,
						open_url: '/pages/product/favorite'
					}, */
					// {
					// 	type: 'gonglve',
					// 	text: this.$w('余额明细'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/wallet/balances'
					// },
					// {
					// 	type: 'gonglve',
					// 	text: '钱包',
					// 	checkLogin: true,
					// 	open_url: '/pages/user/wallet/wallet'
					// },
					// {
					// 	type: 'liebiaoxingshi',
					// 	text: this.scoreName + ' ' + this.$w('明细'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/scores'
					// },
					// {
					// 	type: 'zhengli',
					// 	text: this.scoreName + ' ' + this.$w('互转'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/score/transfer'
					// },
					// {
					// 	type: 'tuikuan',
					// 	text: this.scoreName + ' ' + this.$w('兑换'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/score/cashout'
					// },
					// {
					// 	type: 'hongbao',
					// 	text: this.$w('余额提现'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/wallet/cashout'
					// },
					// {
					// 	code: 'e72d',
					// 	text: this.$w('设置'),
					// 	checkLogin: true,
					// 	open_url: '/pages/user/settings/settings'
					// },
					/* {
						type: 'quan',
						text: '优惠券',
						checkLogin: true,
						open_url: '/pages/user/conpons'
					}, */
					/* {
						type: 'youhuiquan',
						text: '领券中心',
						checkLogin: true,
						open_url: '/pages/product/favorite'
					}, */
					/* {
						type: 'fankui',
						text: '意见反馈',
						open_url: '/pages/app/feedback'
					}, */
					// {
					// 	code: 'e600',
					// 	text: '联系客服', //<!-- 服务协议、隐私政策、资质证照 -->
					// 	open_url: '/pages/system-services/system-customer-service'
					// },
					{
						code: 'e6d6',
						text: this.$w('账号安全'), //<!-- 服务协议、隐私政策、资质证照 -->
						open_url: '/pages/user/info/info'
					}, {
						code: 'e65b',
						text: this.$w('编辑资料'), //<!-- 服务协议、隐私政策、资质证照 -->
						open_url: '/pages/user/edit/personal-information'
					}, {
						code: 'eb40',
						text: this.$w('关于我们'), //<!-- 服务协议、隐私政策、资质证照 -->
						open_url: '/pages/user/about/about'
					},
					{
						code: 'e70b',
						text: this.$w('退出登录'),
						open_url: '/pages/user/account/account'
					}

				];

				// console.log("this.userInfo.role ", this.userInfo.role)
				// 确认是否系统管理员
				// if (this.userInfo && this.userInfo.role && this.userInfo.role
				// 	.indexOf("admin") != -1) {
				// 	optionDataList.push({
				// 		code: 'e620',
				// 		text: this.$w('系统管理'),
				// 		mustLogin: true,
				// 		open_url: '/pages/admin/admin'
				// 	});
				// }
				// 确定排列和颜色等
				optionDataList.forEach((e, index) => {
					if (parseInt(index / colom) % 2 == 1) {
						e.color = color;
					} else {
						e.color = defColor;
					}
				});
				return optionDataList;
			}
		},
		watch: {
			userMobile(v) {
				this.getShopsInfo()
			}
		},
		onLoad() {
			const {
				tokenExpired
			} = uniCloud.getCurrentUserInfo()
			if (tokenExpired < Date.now()) {
				console.info('当前用户的登录状态无效，将自动跳转至登录页面。')
				let url = '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl='
				let paramString = '/pages/index/user?'

				// paramString = paramString.substring(0, paramString.length - 1) //携带参数，实现登录成功后 跳回首页时传回
				url += encodeURIComponent(paramString)
				return uni.reLaunch({
					url
				})
			}
			// #ifdef APP-PLUS
			//检测更新
			checkUpdate().then(res => {
				// console.log("检查更新结果", res)
			});
			// #endif
		},
		onShow() {
			if (this.userInfo.mobile) {
				this.getShopsInfo()
				this.getUserInfo()
			}
		},
		methods: {
			...mapActions({
				getUserInfo: 'user/getUserInfo'
			}),
			test() {
				const apObj = uniCloud.importObject('ap126-co')
				apObj.setPersonalInformation().then(res => {
					console.log(res);
				})

			},
			testgetUser() {
				let reg = new RegExp(this.userInfo.mobile)
				let where = `${reg}.test(phone.head)`
				db.collection('tian-mall-shops').where(where).update({
					isBounded: false
				}).then(({
					result
				}) => {
					console.log(result);
				})
			},
			testAliSms() {
				const obj = uniCloud.importObject('wjf-co')
				obj.testApiSMS().then(res => {
					console.log(res);
				})
			},
			// 读取与店铺相关数据
			getShopsInfo() {
				this.hasUnbound = false //有未绑定的
				// this.hasBounded= null //有已绑定的
				let reg = new RegExp(this.userInfo.mobile)
				let where = `${reg}.test(phone.head)`
				db.collection('tian-mall-shops').where(where).field('phone,isBounded').get().then(({
					result
				}) => {
					console.log('读取店铺未绑定数据等', result.data);
					const ttUnbound = result.data.filter(item => !item.isBounded)
					const ttBounded = result.data.filter(item => item.isBounded)
					if (ttUnbound.length > 0) {
						this.hasUnbound = true
						this.unboundNumber = ttUnbound.length
					}
					// if (ttBounded.length > 0) {
					// 	this.hasBounded = false
					// }
				})
			},
			toApplyShop() {
				uni.showLoading({
					title: '',
					mask: false
				});

				let where = db.command.and([
					db.command.or([{
							uid: this.userInfo._id
						},
						{
							shop_owner_id: db.command.in([this.userInfo._id])
						}
					]),
					{
						apply_state: db.command.in([-1, 0, 2])
					}
				]);


				db.collection('tian-mall-shops').where(where).field('ID,apply_state,uid').get().then(({
					result
				}) => {
					console.log(result.data);
					let shopData = result.data[0]
					if (result.data.length > 0) {
						// 如果审核未通过，管理员将apply_state 设置为-1，以便用户可以修改，重新提交
						if (shopData.apply_state === -1) {
							uni.navigateTo({
								url: '/pages/shop/apply-shop?id=' + result.data[0]._id,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
						if (shopData.apply_state === 0) {
							this.showNote('您的入驻申请已提交，管理员审核中，请耐心等候...')
						}
						if (shopData.apply_state === 2) {
							this.showNote('您提交的入驻申请审核未通过，请联系管理员处理。')
						}
					} else if (result.data.length == 0) {
						uni.navigateTo({
							url: '/pages/shop/apply-shop',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}).finally(() => {
					uni.hideLoading()
				})

			},
			showNote(msg) {
				this.$uvModal({
					content: msg,
					align: 'center',
				})
			},
			navtoBoundShops() {
				uni.navigateTo({
					url: '/pages/shop/boundShops?number=' + this.userInfo.mobile,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navtoShopsManage() {
				uni.navigateTo({
					url: '/pages/shop/shops-manage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navToShopApply() {
				uni.navigateTo({
					url: '/pages/enterprise/apply',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			doNavTo(op) {
				// console.log(op);
				uni.navigateTo({
					url: op.open_url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				// uni.navigateTo({
				// 	url: '/pages/user/account/account',
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			},
			toLogin() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navToUserInfo() {
				uni.navigateTo({
					url: '/pages/user/info/info',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	// page {}

	.user-container {
		// padding-top: $uni-spacing-row-base;
		max-width: 800px;
		min-height: 100vh;
		margin: 0 auto;
		// background-color: #efefef;
		/* 居中显示 */

		.content-box {
			padding-top: 30rpx;
			min-height: 70vh;
			background-color: #fff;
			// background-color: greenyellow;
		}

		.background-color-efefef {
			background-color: #efefef;
		}

		.header {
			background: #ec6535;
			// background: #ec6535;
			margin: 0 $uni-spacing-row-base;

			.header-panel {
				display: flex;
				align-items: center;
				cursor: pointer;
			}

			.username {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.member {
			.name {
				font-size: 18rpx;
				margin-right: 12rpx;
				background: #000000;
				color: #ffffff;
				padding: 0 18rpx;
				border-radius: 50rpx;
			}
		}
	}

	.options {
		flex-wrap: wrap;

		.opt-item {
			width: 25%;
			margin-bottom: 40rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			.opt-icon {
				margin-bottom: 0rpx;
			}

			.item-text-box {
				max-width: 120rpx;
				text-align: center;
				min-height: 70rpx;
				line-height: 1.05;
				display: flex;
				align-items: center;

				text {
					color: #555;
					font: 28rpx;
					margin-top: 0rpx;

				}
			}
		}
	}

	.uv-list-item {
		border-top: 1rpx solid #eee;
	}

	.uv-list-item .badge {
		margin-right: -10px !important;
	}
</style>